<template>
	<div class="content">
		<el-form  size="default"  ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="参数名称" prop="paramName">
        <el-input v-model="form.paramName"/>
      </el-form-item>
      <el-form-item label="参数键名" prop="paramKeyName">
        <el-input v-model="form.paramKeyName"/>
      </el-form-item>
      <el-form-item label="参数键值" prop="paramValue">
        <el-input v-model="form.paramValue"/>
      </el-form-item>
		    <el-form-item style="margin-top:40px;">
				<el-button round  size="default"   plain icon="Edit"  style="margin-left:80px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
				<el-button round  size="default"  plain icon="Refresh"  style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
				<el-button round  size="default"  plain type="info"  @click="close" >取消</el-button>
		    </el-form-item>
		</el-form>
	</div>

</template>

<script lang="ts" setup>
	import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import {info,update,save} from '@/api/paramsetting.ts'
  import ImageUpload from '@/components/ImageUpload/index.vue'
  import {useUserStore} from "@/stores/user.ts";

  const userStore = useUserStore()
	const emit = defineEmits(['closeForm','success'])
	const props = defineProps(['id','t'])
	interface RuleForm {
	  id:any,
    paramName:string,
    paramKeyName:string,
    paramValue:string
	}

	const ruleFormRef = ref<FormInstance>()
	const form = reactive<RuleForm>({
	  id:null,
    paramName:'',
    paramKeyName:'',
    paramValue:'',
	})

	watchEffect(()=>{
		const t = props.t
	    console.log("t",t)
		if(props.id){
			info(props.id).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.paramName=res.data.paramName
					form.paramKeyName=res.data.paramKeyName
					form.paramValue=res.data.paramValue
				}
			})
		}
	})
	
	const rules = reactive<FormRules<RuleForm>>({
    paramName:[{required:true,message:'参数名称不能为空',trigger:'blur'}],
    paramKeyName:[{required:true,message:'参数键名不能为空',trigger:'blur'}],
    paramKeyValue:[{required:true,message:'参数键值不能为空',trigger:'blur'}],
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const code2 = ref();
		  if(form.id != null){
			  const {code} = await update(form);
			  code2.value=code
		  }else{
			  const {code} = await save(form);
			  code2.value=code
		  }
		  if(code2.value === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
        resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
    resetForm(ruleFormRef.value)
		emit('closeForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>